<template>
    <div class="page">
        <div class="bg">
            <img
                alt="北京华锐云空间"
                :src="`${_oss_}images/mobile/help/bg.jpg`"
            />
        </div>

        <div class="container">
            <TabsGroupM
                :list="list"
                v-model:active="active"
                label-name="name"
                value-name="id"
            />

            <div
                class="second-list"
                v-if="Item.children && Item.children.length"
            >
                <div class="second-group">
                    <div
                        class="second-list__item"
                        :class="{ active: cItem.id == secondActive }"
                        v-for="cItem in Item.children"
                        :key="cItem.id"
                        @click="onSecondClick(cItem)"
                    >
                        {{ cItem.name }}
                    </div>
                </div>
            </div>
            <div class="help-content">
                <div
                    class="help-content__title"
                    v-if="!Item.children || Item.children.length == 0"
                >
                    {{ Item.name }}
                </div>
                <div class="help-content__box">
                    <template v-if="secondActive != 0">
                        <div
                            class="help-content__tips"
                            v-html="ChildItem.tips"
                        ></div>
                        <div
                            class="help-content__image"
                            @click="
                                onImagePreview(
                                    _oss_ +
                                        'images/help/' +
                                        ChildItem.id +
                                        '.jpg' +
                                        '?x-oss-process=image/watermark,image_' +
                                        toBase64(
                                            'water/logo_white.png?x-oss-process=image/resize,P_40'
                                        ) +
                                        ',g_center,t_50'
                                )
                            "
                        >
                            <img
                                alt="北京华锐云空间"
                                :src="
                                    _oss_ +
                                    'images/help/' +
                                    ChildItem.id +
                                    '.jpg' +
                                    '?x-oss-process=image/watermark,image_' +
                                    toBase64(
                                        'water/logo_white.png?x-oss-process=image/resize,P_40'
                                    ) +
                                    ',g_center,t_50'
                                "
                            />
                        </div>
                    </template>

                    <template v-else>
                        <div
                            class="help-content__tips"
                            v-html="Item.tips"
                        ></div>
                        <div
                            class="help-content__image"
                            @click="
                                onImagePreview(
                                    _oss_ +
                                        'images/help/' +
                                        Item.id +
                                        '.jpg' +
                                        '?x-oss-process=image/watermark,image_' +
                                        toBase64(
                                            'water/logo_white.png?x-oss-process=image/resize,P_40'
                                        ) +
                                        ',g_center,t_50'
                                )
                            "
                        >
                            <img
                                alt="北京华锐云空间"
                                :src="
                                    _oss_ +
                                    'images/help/' +
                                    Item.id +
                                    '.jpg' +
                                    '?x-oss-process=image/watermark,image_' +
                                    toBase64(
                                        'water/logo_white.png?x-oss-process=image/resize,P_40'
                                    ) +
                                    ',g_center,t_50'
                                "
                            />
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { HelpList, useContent } from ".";
import { ImagePreview } from "@varlet/ui";

const active = ref(1);
const secondActive = ref(0);
const list = ref(HelpList);

useContent();

const getItem = (list, active) => list.find((item) => item.id === active) || {};

const Item = computed(() => {
    return getItem(list.value, active.value);
});

const ChildItem = computed(() => {
    return getItem(Item.value.children || [], secondActive.value);
});

watchEffect(() => {
    const item = getItem(list.value, active.value);
    if (item.children && item.children.length) {
        secondActive.value = item.children[0].id;
    } else {
        secondActive.value = 0;
    }
});

const onSecondClick = ({ id }) => {
    secondActive.value = id;
};

const onImagePreview = (image) => {
    ImagePreview(image);
};
</script>
<style lang="scss">
.help-bold {
    position: relative;
    color: #ffaa3a;
    font-weight: bold;
}
</style>
<style lang="scss" scoped>
.page {
    background-color: #f5f5f5;
    min-height: calc(100vh - 44px);

    .bg {
        width: 100%;

        img {
            display: block;
            width: 100%;
        }
    }

    .container {
        margin-top: 10px;

        .second-list {
            width: 100%;
            padding: 20px 16px 0;

            .second-group {
                width: 100%;
                overflow: auto;
                white-space: nowrap;
            }

            ::-webkit-scrollbar {
                display: none;
            }

            &__item {
                position: relative;
                display: inline-block;
                color: #999;
                margin-right: 20px;
                padding-bottom: 5px;

                &.active {
                    color: #333;
                    &::after {
                        position: absolute;
                        left: 50%;
                        bottom: 0px;
                        content: "";
                        display: block;
                        width: 100%;
                        height: 3px;
                        transform: translateX(-50%);
                        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/mobile/help/icon-bottom-line.png");
                        background-size: 100% 100%;
                    }
                }
            }
        }
    }

    .help-content {
        padding: 20px 16px;

        &__title {
            position: relative;
            font-size: 16px;
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;

            &::after {
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }

        &__tips {
            color: #333;
            font-size: 14px;
            line-height: 18px;
        }

        &__image {
            margin-top: 14px;

            img {
                width: 100%;
            }
        }
    }
}
</style>
